<template>
  <view class="containter">
    <img class="startIcon cursor" @click="toHome" :src="welcome_image" alt="">
    <view class="dialog">
      <view class="dialog-title">
        选择语言后进入
      </view>
      <view class="changeLang">
        <view class="changeLang-item" @click="setIndex(index)" :class="currentIndex == index?'active':''" v-for="(item, index) in langList" :key="index">
           {{item.name}}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import reqApi from "../../api/api.js";
  export default {
    data() {
      return {
        langList: [{
            name: "简体中文",
            value: 'zh'
          },
          {
            name: "English",
            value: "en"
          }
        ],
        currentIndex: 0,
        welcome_image: "/static/images/startIcon.png"
      }
    },
    onLoad(option) {
      this.$nextTick(() => {
        this.$refs.popup.open();
      })
      this.$i18n.setLocale(this.langList[this.currentIndex].value);
      uni.setStorageSync("locale", this.langList[this.currentIndex].value);
      uni.setLocale(this.langList[this.currentIndex].value);
      this.welcome_image = option.src;
      console.log("welcome_image", this.welcome_image);
    },
    methods: {
      toHome() {
        uni.navigateTo({
          url: "/pages/home/about"
        })
      },
      setIndex(index){
        this.currentIndex = index;
        this.$i18n.setLocale(this.langList[index].value);
        uni.setStorageSync("locale", this.langList[index].value);
        uni.setLocale(this.langList[index].value);
      }
    }
  }
</script>

<style lang="scss" scoped>
  .active{
    background: #104682 !important;
    color: #fff !important;
  }
  .containter {
    width: 100vw;
    height: 100vh;
    background: #00508C;
    position: relative;

    .dialog {
      width: 315px;
      height: 200px;
      background: #FFFFFF;
      box-shadow: 0px 0px 16px 0px rgba(16, 70, 130, 0.1);
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 30rpx;
      padding: 50rpx 75rpx;
      box-sizing: border-box;
      .dialog-title{
        font-weight: bold;
        font-size: 16px;
        color: #494B54;
        text-align: center;
      }
      .changeLang{
        display: flex;
        justify-content: space-between;
        margin-top: 60rpx;
        .changeLang-item{
          width: 45%;
          height: 172rpx;
          border-radius: 30rpx 30rpx 30rpx 30rpx;
          border: 2rpx solid rgba(16,70,130,0.3);
          font-weight: 400;
          font-size: 28rpx;
          color: #104682;
          text-align: center;
          line-height: 172rpx;
        }
      }
    }

    .startIcon {
      width: 150rpx;
      height: 150rpx;
      position: absolute;
      z-index: 100;
      bottom: 150rpx;
      left: 50%;
      transform: translatex(-50%);
    }
  }
</style>